<!--
 * @Author: ssj
 * @Date: 2021-06-26 17:51:15
 * @LastEditors: swc
 * @LastEditTime: 2023-12-30 20:06:42
 * @Description: input组件
-->
<template>
  <div class="o-input-cell">
    <Icon
      v-if="type === 'oIconbox'"
      :custom="getEntireIcon"
      style="margin-right:10px;"
    ></Icon>
    <span :class="{ 'read-only': renderOpts.props.disabled }" v-if="!format">{{
      value
    }}</span>
    <Icon v-else-if="format === 'icon'" :custom="getIcon"></Icon>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Tsrv } from '@/services';

@Component
export default class oInputCell extends Vue {
  @Prop() params: any;

  private value = null;

  private format = null;

  private type = null;

  get getIcon() {
    return `wy-icon wy-${this.value}`;
  }

  get getEntireIcon() {
    return `wy-icon ${this.value}`;
  }

  @Watch('params')
  onParamsChange() {
    this.setValue();
  }

  @Prop() renderOpts: any;

  @Watch('renderOpts')
  onRenderOptsChange() {
    this.init();
  }

  mounted() {
    this.init();
    this.setValue();
  }

  init() {
    this.format = this.renderOpts.props['format'];
    this.type = this.renderOpts.props['type'];
  }

  setValue() {
    if (this.params.property) {
      this.value = this.params.data[this.params.property];
    } else if (this.params.column) {
      this.value = this.params.row[this.params.column.property];
    }
  }
}
</script>
<style lang="scss" scoped></style>
